<template>
  <div>
    <el-button type="primary" @click="addUser()">添加</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="添加" width="970px">
      <el-form ref="row_data" :model="row_data" :rules="rules" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="用户名" prop="phone">
          <el-input v-model="row_data.phone" placeholder="用户名" style="width: 200px" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            :type="passwordType"
            v-model="row_data.password"
            :placeholder="$t('login.password')"
            name="password"
            auto-complete="on"
            style="width: 200px"
            @keyup.enter.native="handleLogin">
            <span slot="prefix" class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <span slot="suffix" class="show-pwd" @click="showPwd">
              <svg-icon icon-class="eye" />
            </span>
          </el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="row_data.nickname" placeholder="昵称" style="width: 200px" />
        </el-form-item>
        <el-form-item :label="'账号状态'" prop="">
          <el-select v-model="row_data.status" class="filter-item" placeholder="请选择状态" clearable @keyup.enter.native="handleFilter">
            <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="'管理员权限'" prop="">
          <el-select v-model="row_data.role_id" class="filter-item" placeholder="请选择" clearable>
            <el-option v-for="(item, index) in shop_role" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="'头像'" prop="product_main_photo">
          <div class="upload_product_main_photo">
            <el-alert
              title="建议图片像素（750px * 750px）"
              type="warning"
              show-icon
              style="margin-bottom: 10px; line-height: 20px; width: 280px"
              close-text="知道了" />
            <el-upload
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :http-request="upload_product_main_photo"
              class="avatar-uploader"
              action="">
              <img v-if="row_data.head_img" :src="row_data.head_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">立即创建</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { add } from '@/api/shop_admin_auth/admin_user'
import { client } from '@/utils/alioss'
import { getShopRoleList } from '@/api/shop_admin_auth/shopRole'
import store from '@/store'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   callback()
    // }
    // const validatePassword = (rule, value, callback) => {
    //   if (!value || value.length < 6) {
    //     callback(new Error('The password can not be less than 6 digits'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      rules: {
        nickname: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '账号状态不能为空', trigger: 'blur' }
        ],
        role_id: [
          { required: true, message: '管理权限不能为空', trigger: 'blur' }
        ]
      },
      status: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      dialogTableVisible: false,
      list: [],
      role_id: null,
      row_data: {
        status: 1
      },
      loginForm: {
        username: '',
        password: ''
      },
      shop_role: [],
      passwordType: 'password',
      loading: false,
      showDialog: false
    }
  },
  created() {},
  methods: {
    addUser() {
      this.dialogTableVisible = true
      this.getUserInfo()
      this.get_shop_role_list()
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    valueItem(index) {
      for (let i = 0; i < this.list.length; i += 1) {
        if (this.list[i].id === index) {
          this.row_data.phone = this.list[i].phone
        }
      }
    },
    getUserInfo() {
      // getUserInfoList(store.getters.token).then(response => {
      //   this.list = response.data.list.data
      // })
    },
    get_shop_role_list() {
      getShopRoleList(store.getters.token).then((response) => {
        console.log(response.data.data)
        this.shop_role = response.data.data
      })
      // getShopRoleList(store.getters.token).then(res => {
      //   this.shop_role = res.data.list.data
      // })
    },
    // 上传图片
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }
      return isJPG | isPNG && isLt2M
    },
    upload_product_main_photo(file) {
      const that = this
      const fileName = 'meirijiemi' + file.file.uid
      client()
        .put(fileName, file.file)
        .then((res) => {
          this.$set(that.row_data, 'head_img', res.url)
          that.$message.success('图片上传成功！')
        })
        .catch((err) => {
          that.$message.error('图片上传失败，原因：' + err)
        })
    },
    submitForm() {
      this.$refs.row_data.validate((valid) => {
        if (valid) {
          add(store.getters.token, this.row_data).then((res) => {
            if (res.data.status === true) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.row_data = {}
              this.close()
            } else {
              this.$message.error(res.data.msg)
            }
            this.$emit('getLists')
          })
        } else {
          return false
        }
      })
    },
    close() {
      this.dialogTableVisible = false
    }
  }
}
</script>
<style>
/* 图片上传的样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  color: #8c939d;
  text-align: center;
}
.avatar {
  display: block;
}
/* 头像(product_main_photo)图片上传组件的尺寸 */
.upload_product_main_photo .avatar-uploader-icon {
  font-size: 28px;
  min-width: 178px;
  height: 178px;
  line-height: 178px;
}
.upload_product_main_photo .avatar {
  min-width: 178px;
  height: 178px;
}
</style>
